<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 

        div{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            position: absolute;
            left: calc(50% - 50px);
            top: calc(50% - 50px);
            border-radius: 10px;
  
            border-radius: 10px 20px 30px 40px;   
            /* 左上 右上 右下 左下  还可以写两个值 三个值，和border一样的 */

            border-top-left-radius: 10px;
            /* 分别设置四个角 写一个值相当于水平半径和垂直半径一样*/
            border-top-right-radius: 20px;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 40px;
            
            border-top-left-radius: 10px 20px; 
            border-top-right-radius: 20%;
            /* 相当于下面这种写法，注意两个值的百分比的相对的一个是长一个是宽 */
            border-top-right-radius: 20% 20%;
            /* 每个角可以设置两个值，分别是水平切割半径和垂直切割半径 */
            /* 设置百分比也是速写的，最后会转化成这种最复杂的写法 */
            /* 而且水平半径的百分比是相对于长的，垂直的相对于宽 */
            /* 当相邻的两个角半径太长而重叠时，会发生复杂的变化，不考虑 */


            border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
            /*简写不常见： / 前面的是水平半径，后面的是垂直半径 */
        }


    </style>
</head>
<body>
    <div></div>
</body>
</html>